<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./1.css">
</head>
<body>
    <h1>订单详情页面</h1>
    <div class="box">
        <input type="text" placeholder="输入商品的名称">
        <input type="text" placeholder="输入商品的价格">
        <input type="text" placeholder="输入商品的数量">
        <input type="text" placeholder="输入商品的地址">
        <button onclick="add()">添加</button>
    </div>
    <table>
        <thead>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>总价</th>
            <th>收货地址</th>
        </thead>
    </table>
    <tbody>
        <!-- <tr>
            <td>小米青春版PLUS</td>
            <td>888元</td>
            <td>100</td>
            <td>88800元</td>
            <td>北京市海淀区中关村街道</td>
        </tr> -->
    </tbody>
</body>
</html>
<script>
    var ipts=document.querySelectorAll('input');
    var tbody=document.querySelector('tbody');
    function cun(arr){
        localStorage.setItem('date',JSON,stringify(arr));
    }
    function qu(){
        var a=localStorage.getItem('data');
        if(a!=null){
            return JSON.parse(a);
        }else{
            return [];
        }
    }
    function add(){
        var arr=qu();
        arr.push({
           'name':ipts[0].value,
            'price':ipts[1].value,
            'num':ipts[2].value,
            'address':ipts[3].value,
        })
        cun(arr);
        xr();
    }
    function xr(){
        tbody.innerHTML='';
        var arr=qu();
        for(var i=0;i<arr.length;i++){
            var tr=document.createElement('tr');
            tr.innerHTML=`
                <td>${arr[i].name}</td>
                <td>${arr[i].price}元</td>
                <td>${arr[i].num}</td>
                <td>${arr[i].price*arr[i].num}元</td>
                <td>${arr[i].address}</td>
            `;
            tbody.appendChild(tr);
        }       
    }
    xr();
</script>